<template>
  <div class="system">
    <!-- 页面标题 -->
    <hm-nav-bar title="系统设置" path="/home/my"></hm-nav-bar>
    <!-- 功能选项 -->
    <div class="options">
      <van-cell-group class="van-cell-group">
        <van-cell
          :border="false"
          class=" my-cell"
          title="手机号"
        >
          <template #right-icon>
            <i class="iconfont icon-tubiao-"></i>
          </template>
        </van-cell>
        <van-cell :border="false" class=" my-cell" title="修改密码">
          <template #right-icon>
            <i class="iconfont icon-tubiao-"></i>
          </template>
        </van-cell>
      </van-cell-group>
      <div class="tips">开启后，可以让你的好友找到你</div>
      <van-cell-group class="van-cell-group">
        <van-cell :border="false" class=" my-cell" title="允许将我推荐给好友">
          <van-switch v-model="firstChecked" />
        </van-cell>
      </van-cell-group>
      <div class="tips">开启后，可以向你推荐好友</div>
      <van-cell-group class="van-cell-group">
        <van-cell
          :border="false"
          class=" my-cell"
          title="允许给我推荐可能认识的人"
        >
          <van-switch v-model="secondChecked" />
        </van-cell>
      </van-cell-group>
      <div class="button">
        <van-button type="danger" class="logout" @click="logout"
          >退出登录</van-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'system',
  data () {
    return {
      firstChecked: false,
      secondChecked: false
    }
  },
  methods: {
    logout () {
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="less" scoped>
.options {
  height: 100vh;
  padding-top: 50px;
  background-color: #f9f9f9;
  .van-cell-group {
    border-radius: 20px;
    .my-cell {
      font-size: 16px;
      padding: 20px;
      align-items: center;
      border-radius: 10px;
    }
  }
  .tips {
    font-size: 12px;
    padding-left: 20px;
    height: 30px;
    line-height: 30px;
    color: #969799;
  }
  .button {
    width: 100%;
    padding: 10px 20px;
    .logout {
      width: 100%;
      border-radius: 10px;
    }
  }
}
</style>
